<template>
  <div class="report-form">
    <div class="page__header">
      <button class="page__header-btn-back" @click="$router.go(-1)"></button>
      能源换电日报报表
      <button class="page__header-btn-link" @click="$router.go(-1)">专题</button>
    </div>
    <div class="title-bg">
      {{showDate}}能源换电日报报表
      <button type="button" class="title-bg__btn" @click="tipDialog.show = true"></button>
      <div class="title-tip">（能源换电日报数据均来源于能源系统，与能源系统出具的日报数据保持一致）</div>
    </div>
    <div class="tabs" v-if="role != 'city'">
      <div
        class="tabs__item"
        v-for="(item, index) in tabs.list"
        :key="index"
        :class="item.id == tabs.active ? 'tabs__item--current' : ''"
        @click="handleTabChange(item.id)"
      >{{item.name}}</div>
    </div>
    <div class="tabs" v-else>
      <div
        class="tabs__item tabs__item--current"
      >地市情况统计</div>
    </div>
<!--    <div class="pd-aside bg-white" style="padding: 8px 10px;" v-show="tabs.active == '1'">-->
<!--      <div class="selects">-->
<!--        &lt;!&ndash;       时间选择框（开始时间）&ndash;&gt;-->
<!--        <div class="selects__item select-date" @click="chooseDate('province')">-->
<!--          {{datePickerProvince.showData}}-->
<!--        </div>-->
<!--        <div style="margin-top: 4px;"> - </div>-->
<!--        &lt;!&ndash;        时间选择器（结束时间）&ndash;&gt;-->
<!--        <div class="selects__item select-date" @click="chooseDate('endProvince')">-->
<!--          {{endDatePickerProvince.showData}}-->
<!--        </div>-->
<!--        &lt;!&ndash;        地域选择框&ndash;&gt;-->
<!--        <div class="selects__item select-address" @click="provinceInfo.show = true">-->
<!--          {{provinceInfo.showArea}}-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->
<!--    <div class="pd-aside bg-white" style="padding: 8px 10px 2px 10px;" v-show="tabs.active == '2'">-->
<!--      <div class="selects">-->
<!--        &lt;!&ndash;       时间选择框（开始时间）&ndash;&gt;-->
<!--        <div class="selects__item selects__item&#45;&#45;date1" @click="chooseDate('city')">-->
<!--          {{datePickerCity.showData}}-->
<!--        </div>-->
<!--        <div style="margin-top: 4px;"> - </div>-->
<!--        &lt;!&ndash;        时间选择器（结束时间）&ndash;&gt;-->
<!--        <div class="selects__item select-date" @click="chooseDate('endCity')">-->
<!--          {{endDatePickerCity.showData}}-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->
<!--    <div class="pd-aside bg-white" style="padding: 2px 10px;" v-show="tabs.active == '2'">-->
<!--      <div class="selects">-->
<!--        &lt;!&ndash;        省分选择框&ndash;&gt;-->
<!--        <div class="selects__item" @click="chooseCity('province')">-->
<!--          {{areaInfo.showArea}}-->
<!--        </div>-->
<!--        &lt;!&ndash;        地市选择框&ndash;&gt;-->
<!--        <div class="selects__item" @click="chooseCity('city')">-->
<!--          {{cityInfo.showArea}}-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->

    <div class="pd-aside bg-white" style="padding: 8px 10px;" v-show="tabs.active == '1'">
      <div class="selects">
        <div class="selects__item" @click="chooseDate('province')">
          {{datePickerProvince.showData}}
        </div>
        <div class="selects__item" @click="provinceInfo.show = true">
          {{provinceInfo.showArea}}
        </div>
      </div>
    </div>
    <div class="pd-aside bg-white" style="padding: 8px 10px;" v-show="tabs.active == '2'">
      <div class="selects">
        <div class="selects__item selects__item--date" @click="chooseDate('city')">
          {{datePickerCity.showData}}
        </div>
        <div class="selects__item" @click="chooseCity('province')">
          {{areaInfo.showArea}}
        </div>
        <div class="selects__item" @click="chooseCity('city')">
          {{cityInfo.showArea}}
        </div>
      </div>
    </div>
    <!-- <div class="pd-aside bg-white checks" v-show="tabs.active == '2'">
       <span class="checks__name">归属系统：</span>
       <van-checkbox-group v-model="checkboxGroup" @change="handleSelectChange">
         <van-checkbox name="飞哥" shape="square" checked-color="#ff716b" icon-size="16px">飞哥</van-checkbox>
         <van-checkbox name="飞哥换电" shape="square" checked-color="#ff716b" icon-size="16px">飞哥换电</van-checkbox>
         <van-checkbox name="新换电" shape="square" checked-color="#ff716b" icon-size="16px">新换电</van-checkbox>
       </van-checkbox-group>
     </div>-->
    <div class="page__main bg-white">
      <div class="page__scroller">
        <div class="pd-aside" style="height: 100%;">
          <FixedTable :data="table" v-show="tabs.active == '1'" @tableDataSort="getTableData('province')" @passSort="passSort" @passTag="passTag" @passChinese="passChinese"></FixedTable>
          <FixedTable :data="table2" v-show="tabs.active == '2'" @tableDataSort="getTableData('city')" @passSort="passSort" @passTag="passTag" @passChinese="passChinese"></FixedTable>
        </div>
        <WaterMark :length="3"></WaterMark>
      </div>
    </div>
    <!--    开始时间选择器-->
    <van-popup
      v-model="datePickerProvince.show"
      position="bottom"
      :style="{ height: '40%' }"
    >
      <van-datetime-picker
        v-model="datePickerProvince.currentDate"
        ref="province"
        type="date"
        :min-date="datePickerProvince.minDate"
        :max-date="datePickerProvince.maxDate"
        @cancel="handleCanleDate('province')"
        @confirm="handleConfirmDateProvince('province')"
      ></van-datetime-picker>
    </van-popup>

    <van-popup
      v-model="datePickerCity.show"
      position="bottom"
      :style="{ height: '40%' }"
    >
      <van-datetime-picker
        v-model="datePickerCity.currentDate"
        ref="city"
        type="date"
        :min-date="datePickerCity.minDate"
        :max-date="datePickerCity.maxDate"
        @cancel="handleCanleDate('city')"
        @confirm="handleConfirmDateCity('city')"
      ></van-datetime-picker>
    </van-popup>
    <!--    结束时间选择器-->
<!--    <van-popup-->
<!--      v-model="endDatePickerProvince.show"-->
<!--      position="bottom"-->
<!--      :style="{ height: '40%' }"-->
<!--    >-->
<!--      <van-datetime-picker-->
<!--        v-model="endDatePickerProvince.currentDate"-->
<!--        ref="endProvince"-->
<!--        type="date"-->
<!--        :min-date="datePickerProvince.currentDate"-->
<!--        :max-date="endDatePickerProvince.maxDate"-->
<!--        @cancel="handleCanleDate('endProvince')"-->
<!--        @confirm="handleConfirmDateProvince('endProvince')"-->
<!--      ></van-datetime-picker>-->
<!--    </van-popup>-->

<!--    <van-popup-->
<!--      v-model="endDatePickerCity.show"-->
<!--      position="bottom"-->
<!--      :style="{ height: '40%' }"-->
<!--    >-->
<!--      <van-datetime-picker-->
<!--        v-model="endDatePickerCity.currentDate"-->
<!--        ref="endCity"-->
<!--        type="date"-->
<!--        :min-date="datePickerCity.currentDate"-->
<!--        :max-date="endDatePickerCity.maxDate"-->
<!--        @cancel="handleCanleDate('endCity')"-->
<!--        @confirm="handleConfirmDateCity('endCity')"-->
<!--      ></van-datetime-picker>-->
<!--    </van-popup>-->
    <!--    -->
    <van-popup
      v-model="provinceInfo.show"
      position="bottom"
      :style="{ height: '40%' }"
    >
      <van-picker
        show-toolbar
        :columns="provinceInfo.columns"
        :defaultIndex='provinceInfo.defaultIndex'
        @cancel="provinceInfo.show = false"
        @confirm="confirmFnArea"
      />
    </van-popup>
    <van-popup
      v-model="areaInfo.show"
      position="bottom"
      :style="{ height: '40%' }"
    >
      <van-picker
        show-toolbar
        :columns="areaInfo.columns"
        :defaultIndex='areaInfo.defaultIndex'
        @cancel="cancelFn('province')"
        @confirm="confirmFnProvince"
      />
    </van-popup>
    <van-popup
      v-model="cityInfo.show"
      position="bottom"
      :style="{ height: '40%' }"
    >
      <van-picker
        show-toolbar
        :columns="cityInfo.columns"
        :defaultIndex='cityInfo.defaultIndex'
        @cancel="cancelFn('city')"
        @confirm="confirmFnCity"
      ></van-picker>
    </van-popup>
    <!--分页-->
    <van-pagination
      v-model="page"
      :page-count="total"
      :items-per-page="pageRows"
      @change="tabs.active == '1'?nextText('province'):nextText('city')"
      mode="simple"
    />
    <div class="tip-dialog" v-show="tipDialog.show">
      <div class="tip-dialog__main">
        <div class="tip-dialog__header">
          指标说明
          <button type="button" class="tip-dialog__close" @click="tipDialog.show = false"></button>
        </div>
        <div class="tip-dialog__body">
          <div class="tip-dialog__list">
            <div class="tip-dialog__item" v-for="(item, index) in tipDialog.list" :key="index">
              <div class="tip-dialog__item-title">{{item.title}}</div>
              <div class="tip-dialog__item-intro" v-show="item.intro != undefined">{{item.intro}}</div>
              <div class="tip-dialog__item-detail" v-show="item.detail != undefined">{{item.detail}}</div>
            </div>
          </div>
          <div class="footer-tip">了解更多信息，请登录PC端运营数据展示系统</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Header from '@/components/Header'
import FixedTable from '@/components/FixedTable'
import WaterMark from '@/components/WaterMark'

export default {
  components:{
    Header,
    FixedTable,
    WaterMark
  },
  data() {
    return {
      pageParams: {
        selectDate: this.$route.query.selectDate,
      },
      areaProvince1:'100000',
      areaProvince2:'100000',
      areaCity:'0',
      showDate: '',
      passedSort: 'none',
      passedTag: '',
      page: '1',
      total:'',
      pageRows:'96',
      passedChinese:true,
      isProvince:null,
      userInfo: this.$store.state.userInfo,
      areaId:'100000',
      role:'all',
      datePickerProvince: {
        showData: '--/--/--',
        selectDate: '',
        show: false,
        currentDate: new Date(),
        minDate: new Date(),
        maxDate: new Date(),
      },
      datePickerCity: {
        showData: '--/--/--',
        selectDate: '',
        show: false,
        currentDate: new Date(),
        minDate: new Date(),
        maxDate: new Date(),
      },
      endDatePickerProvince: {
        showData: '--/--/--',
        selectDate: '',
        show: false,
        currentDate: new Date(),
        minDate: new Date(),
        maxDate: new Date(),
      },
      endDatePickerCity: {
        showData: '--/--/--',
        selectDate: '',
        show: false,
        currentDate: new Date(),
        minDate: new Date(),
        maxDate: new Date(),
      },
      provinceInfo: {
        show: false,
        defaultIndex: 0,
        showArea: '',
        selectId: '100000',

        columns: []
      },
      areaInfo: {
        show: false,
        defaultIndex: 0,
        showArea: '',
        selectId: '100000',

        columns: []
      },
      cityInfo: {
        show: false,
        defaultIndex: 0,
        showArea: "地市",
        selectId: "0",
        columns: []
      },
      tabs: {
        active: '1',
        list: [
          {name: '省分情况统计', id: '1'},
          {name: '地市情况统计', id: '2'}
        ]
      },
      checkboxGroup: ['飞哥', '飞哥换电', '新换电'],
      tableHead:[
        {titile:'地域',width:100},
        {titile:'地域',width:100},
        {titile:'地域',width:100},
        {titile:'地域',width:100},
      ],
      table: {
        fixed: true,
        fixedHead: true,
        fixedLeft: true,
        loading: false,
        reset: false,
        type:1,
        tableHead: [
          {title: '省分', width: 70, tag: 'CITY_NAME',sortable: true, fixed: true,sort: 'none',chinese:false,},
          {title: '换电柜数量(个)', width: 100, sortable: true, tag: 'CABINET_NUM', sort: 'none', canFormat: true,chinese:true,},
          {title: '当年净增换电柜数量(个)', width: 100, sortable: true, tag: 'DN_CABINET_NUM', sort: 'none', canFormat: true,chinese:true,},
          {title: '仓位数量(个)', width: 100, sortable: true, tag: 'POSITION_NUM', sort: 'none', canFormat: true,chinese:true,},
          {title: '电池数量(个)', width: 100, sortable: true, tag: 'BATTERY_NUM', sort: 'none', canFormat: true,chinese:true,},
          {title: '当年净增电池数(个)', width: 100, sortable: true, tag: 'NEW_BATTERY_NUM', sort: 'none', canFormat: true,chinese:true,},
          {title: '注册用户(个)', width: 100, sortable: true, tag: 'REGISTER_USER', sort: 'none', canFormat: true,chinese:true,},
          {title: '付费用户数(个)', width: 100, sortable: true, tag: 'PAY_USER', sort: 'none', canFormat: true,chinese:true,},
          {title: '当日净增付费用户(个)', width: 100, sortable: true, tag: 'NEW_PAY_USER', sort: 'none', canFormat: true,chinese:true,},
          {title: '当月发展付费用户数(个)', width: 100, sortable: true, tag: 'DY_PAY_USER_NUM', sort: 'none', canFormat: true,chinese:true,},
          {title: '当月离网付费用户数(个)', width: 100, sortable: true, tag: 'DY_OFFGRID_PAY_USER', sort: 'none', canFormat: true,chinese:true,},
          {title: '当月净增付费用户(个)', width: 100, sortable: true, tag: 'NEW_PAY_USER_MON', sort: 'none', canFormat: true,chinese:true,},
          {title: '当年净增付费用户(个)', width: 100, sortable: true, tag: 'NEW_PAY_USER_YEAR', sort: 'none', canFormat: true,chinese:true,},
          {title: '电池用户比', width: 100, sortable: true, tag: 'BATTERY_USER_RATIO', sort: 'none', canFormat: true,chinese:true,},
          {title: '活跃人数(个)', width: 100, sortable: true, tag: 'NEW_DAY_ACTIVE_USER', sort: 'none', canFormat: true,chinese:true,},
          {title: '换电次数(次)', width: 100, sortable: true, tag: 'SWITCH_TIMES', sort: 'none', canFormat: true,chinese:true,},
          {title: '付费用户与注册用户比(%)', width: 130, tag: 'PAY_USER_RATE', sort: 'none',chinese:true,},
          {title: '日活跃用户与付费用户比(%)', width: 130, tag: 'DAY_ACTIVE_RATE', sort: 'none',chinese:true,},
          {title: '户均换电次数(次)', width: 100, sortable: true, tag: 'PER_SWITCH_TIMES', sort: 'none', canFormat: true,chinese:true,},
          {title: '换电成功率(%)', width: 100,sortable: true, tag: 'SWITCH_RATE', sort: 'none',chinese:true,canFormat: true,},
          {title: '电池满足率(%)', width: 100,sortable: true, tag: 'BATTERY_SATISFY_RATIO', sort: 'none',chinese:true,canFormat: true,},
        ],
        tableData: []
      },
      table2: {
        fixed: true,
        fixedHead: true,
        fixedLeft: true,
        loading: false,
        reset: false,
        type:2,
        tableHead: [
          {title: '省分', width: 70, tag: 'PROVINCE_NAME',sortable: true, fixed: true,sort: 'none',chinese:false,},
          {title: '地市', width: 70, tag: 'CITY_NAME',sortable: true, fixed: true,sort: 'none',chinese:false,},
          {title: '换电柜数量(个)', width: 100, sortable: true, tag: 'CABINET_NUM', sort: 'none', canFormat: true,chinese:true,},
          {title: '当年净增换电柜数量(个)', width: 100, sortable: true, tag: 'DN_CABINET_NUM', sort: 'none', canFormat: true,chinese:true,},
          {title: '仓位数量(个)', width: 100, sortable: true, tag: 'POSITION_NUM', sort: 'none', canFormat: true,chinese:true,},
          {title: '电池数量(个)', width: 100, sortable: true, tag: 'BATTERY_NUM', sort: 'none', canFormat: true,chinese:true,},
          {title: '当年净增电池数(个)', width: 100, sortable: true, tag: 'DN_BATTERY_NUM', sort: 'none', canFormat: true,chinese:true,},
          {title: '注册用户(个)', width: 100, sortable: true, tag: 'REGISTER_USER', sort: 'none', canFormat: true,chinese:true,},
          {title: '付费用户数(个)', width: 100, sortable: true, tag: 'PAY_USER', sort: 'none', canFormat: true,chinese:true,},
          {title: '当日净增付费用户(个)', width: 100, sortable: true, tag: 'NEW_PAY_USER', sort: 'none', canFormat: true,chinese:true,},
          {title: '当月发展付费用户数(个)', width: 100, sortable: true, tag: 'DY_PAY_USER_NUM', sort: 'none', canFormat: true,chinese:true,},
          {title: '当月离网付费用户数(个)', width: 100, sortable: true, tag: 'DY_OFFGRID_PAY_USER', sort: 'none', canFormat: true,chinese:true,},
          {title: '当月净增付费用户(个)', width: 100, sortable: true, tag: 'NEW_PAY_USER_MON', sort: 'none', canFormat: true,chinese:true,},
          {title: '当年净增付费用户(个)', width: 100, sortable: true, tag: 'NEW_PAY_USER_YEAR', sort: 'none', canFormat: true,chinese:true,},
          {title: '电池用户比', width: 100, sortable: true, tag: 'BATTERY_USER_RATIO', sort: 'none', canFormat: true,chinese:true,},
          {title: '活跃人数(个)', width: 100, sortable: true, tag: 'DAY_ACTIVE_USER', sort: 'none', canFormat: true,chinese:true,},
          {title: '换电次数(次)', width: 100, sortable: true, tag: 'SWITCH_TIMES', sort: 'none', canFormat: true,chinese:true,},
          {title: '付费用户与注册用户比(%)', width: 130, sortable: true, tag: 'PAY_USER_RATE', sort: 'none', canFormat: true,chinese:true,},
          {title: '日活跃用户与付费用户比(%)', width: 130, sortable: true, tag: 'DAY_ACTIVE_RATE', sort: 'none', canFormat: true,chinese:true,},
          {title: '户均换电次数(次)', width: 100, sortable: true, tag: 'PER_SWITCH_TIMES', sort: 'none', canFormat: true,chinese:true,},
          {title: '换电成功率(%)', width: 100,sortable: true, tag: 'SWITCH_RATE', sort: 'none',chinese:true,canFormat: true,},
          {title: '电池满足率(%)', width: 100,sortable: true, tag: 'BATTERY_SATISFY_RATIO', sort: 'none',chinese:true,canFormat: true,},
        ],
        tableData: []
      },
      tipDialog: {
        show: false,
        list: [
          {
            title: '电池骑手比',
            intro: '电池骑手比=电池数量/付费骑手数量'
          },
          {
            title: '付费用户与注册用户比',
            intro: '付费用户与注册用户比=付费骑手数量/注册骑手数量'
          },
          {
            title: '日活跃用户与付费用户比 ',
            intro: '日活跃用户与付费用户比 =日活跃人数/付费骑手数量'
          },
          {
            title: '日人均换电次数',
            intro: '日人均换电次数= 换电次数/日活跃人数'
          },
        ]
      }
    }
  },
  watch: {
    passedSort(newVal) {
      if(newVal === 'none') {
        this.getTableData('province')
        this.getTableData('city')
      }
    } ,

  },
  methods: {
    passSort(sort) {
      this.passedSort = sort
    },
    passTag(tag) {
      this.passedTag = tag
    },
    passChinese(chinese){
      this.passedChinese=chinese
    },
    handleTabChange (id) {
      if(this.tabs.active != id) {
        this.tabs.active = id
        this.provinceInfo.selectId=this.areaProvince1
        if (this.tabs.active == '1') {
          let provinceHead = this.table.tableHead
          this.table.tableHead = []
          this.table.tableHead = provinceHead
          // this.showDate = this.datePickerProvince.showData
          this.passedSort='none',
            this.passedTag= '',
            this.passedChinese=true,
            this.showDate= '',
            this.page= '1'

          this.getTableData('province')
          this.table.reset = true

        } else {
          let provinceHead = this.table2.tableHead
          this.table2.tableHead = []
          this.table2.tableHead = provinceHead
          // this.showDate = this.datePickerCity.showData
          this.maxDate = this.showDate
          this.passedSort='none',
            this.passedTag= '',
            this.passedChinese=true,
            this.showDate= '',
            this.page= '1',
            this.provinceInfo.selectId=this.areaProvince2
          this.cityInfo.selectId=this.areaCity
          this.getTableData('city')
          this.table.reset = true

        }
      }
    },
    handleSelectChange(val) {
      this.getTableData('city')
    },
    chooseDate(type) {
      if (type == 'province') {
        this.datePickerProvince.show = true
      } else if (type == 'city') {
        this.datePickerCity.show = true
      }
      // else if(type =='endProvince'){
      //   this.endDatePickerProvince.show = true
      // }else if(type =='endCity'){
      //   this.endDatePickerCity.show = true
      // }
    },
    handleCanleDate(type) {
      if (type == 'province') {
        this.datePickerProvince.show = false
      } else if (type == 'city') {
        this.datePickerCity.show = false
      }
      // else if(type =='endProvince'){
      //   this.endDatePickerProvince.show = false
      // }else if(type =='endCity'){
      //   this.endDatePickerCity.show = false
      // }
    },
    handleConfirmDateProvince(state) {
      let currentData = state === 'province' ? 'datePickerProvince' : 'endDatePickerProvince'
      this[currentData].show = false

      let currentRef = this.$refs[state]
      let value1 = currentRef.value
      let date = new Date(value1)
      let year = date.getFullYear()
      let month = date.getMonth() + 1
      let day = date.getDate()
      let month1 = month < 10 ? '0' + month : month
      let day1 = day < 10 ? '0' + day : day
      this[currentData].showData = year + '/' + month + '/' + day
      this[currentData].selectDate = year + '' + month1 + '' + day1
      // TODO 是否需要增加字段区别
      this.showDate = year + '年' + month + '月' + day+'日'
      // TODO 获取数据方法需修改
      this.getTableData('province')
    },
    handleConfirmDateCity(state) {
      let currentData = state === 'city' ? 'datePickerCity' : 'endDatePickerCity'
      this[currentData].show = false

      let currentRef = this.$refs[state]
      let value2 = currentRef.value
      let date = new Date(value2)
      let year = date.getFullYear()
      let month = date.getMonth() + 1
      let day = date.getDate()
      let month1 = month < 10 ? '0' + month : month
      let day1 = day < 10 ? '0' + day : day
      this[currentData].showData = year + '/' + month + '/' + day
      this[currentData].selectDate = year + '' + month1 + '' + day1
      // TODO 是否需要增加字段区别
      this.showDate = year + '年' + month + '月' + day +'日'
      // TODO 获取数据方法需修改
      this.getTableData('city')
    },
    //获得地市
    getAreaInfo() {
      let params = {
        statMonth: this.datePickerCity.selectDate,
        areaId: this.areaId
      }

      this.$http
        .post("api/yearCheckIndex/getKpiAreaInfo", params)
        .then(data => {
          //获取省会
          if (data.rows.length > 1) {
            this.areaInfo.columns = []
            data.rows.forEach(item => {

              this.areaInfo.columns.push({
                text: item.area,
                id: item.areaId
              })
            })
            this.areaInfo.columns.unshift({ text: "全国", id: "100000" })
            this.cityInfo.columns.unshift({ text: "地市", id: "0" })
            this.areaInfo.showArea = '全国'
          }
          // 获取地市
          if (data.rows2.length > 1) {
            this.cityInfo.columns = []
            data.rows2.forEach(item => {
              this.cityInfo.columns.push({
                text: item.area,
                id: item.areaId
              });
            });
            this.cityInfo.columns.unshift({ text: "地市", id: "0" })
            this.areaInfo.selectId = data.rows[0].areaId
            this.areaInfo.showArea = data.rows[0].area
            if (this.role == "province") {
              this.areaInfo.columns.push(
                {
                  text: data.rows[0].area,
                  id: data.rows[0].areaId
                }
              )
              this.areaInfo.defaultIndex = 1
            }
          } else if (data.rows2.length == 1 ) {
            if (this.role == "city") {
              this.areaInfo.selectId = data.rows[0].areaId
              this.areaInfo.showArea = data.rows[0].area
              this.areaInfo.columns = [
                {
                  text: data.rows[0].area,
                  id: data.rows[0].areaId
                }
              ]
              this.cityInfo.selectId = data.rows2[0].areaId
              this.cityInfo.showArea = data.rows2[0].area
              this.cityInfo.defaultIndex = 1
              this.cityInfo.columns = [
                {
                  text: data.rows2[0].area,
                  id: data.rows2[0].areaId
                }
              ]
            }
          }
        });
    },
    //获得地市
    getProvinceInfo() {
      let params = {
        statMonth: this.datePickerCity.selectDate,
        areaId: this.areaId
      }

      this.$http
        .post("api/yearCheckIndex/getKpiAreaInfo", params)
        .then(data => {
          //获取省会
          if (data.rows.length > 1) {
            this.provinceInfo.columns = []
            data.rows.forEach(item => {
              this.provinceInfo.columns.push({
                text: item.area,
                id: item.areaId
              })
            })
            this.provinceInfo.columns.unshift({ text: "全国", id: "100000" })
            this.provinceInfo.showArea = '全国'
          }
          // 获取地市
          if (data.rows2.length > 1) {
            this.provinceInfo.selectId = data.rows[0].areaId
            this.provinceInfo.showArea = data.rows[0].area
            if (this.role == "province") {
              this.provinceInfo.columns.push(
                {
                  text: data.rows[0].area,
                  id: data.rows[0].areaId
                }
              )
              this.provinceInfo.defaultIndex = 1
            }
          }
        });
    },
    //显示地市弹框
    chooseCity(area) {
      if (area == 'province') {
        this.areaInfo.show = true
      } else if (area == 'city') {
        this.cityInfo.show = true
      }
    },
    //取消地市弹框
    cancelFn(area) {
      if (area == 'province') {
        this.areaInfo.show = false
      } else if (area == 'city') {
        this.cityInfo.show = false
      }
    },
    //确认
    confirmFnProvince(item, index) {
      if (this.areaInfo.selectId != item.id) {
        this.areaInfo.selectId = item.id
        this.areaId = item.id
        if(this.tabs.active=='1'){
          this.areaProvince1=item.id
        }else{
          this.areaProvince2=item.id
        }
        this.areaInfo.showArea = item.text
        this.cityInfo.columns = []
        this.cityInfo.showArea = '地市'
        if (this.role == 'province') {
          if (this.areaId != '100000') {
            this.areaInfo.columns = []
            this.getAreaInfo()
          } else {
            this.cityInfo.columns = [{text: '地市', id: '0'}]
          }
        } else {
          this.getAreaInfo()
        }
        this.getTableData('city')
      }
      this.areaInfo.show = false
    },
    //确认地市
    confirmFnCity(item, index) {
      if (this.cityInfo.selectId != item.id) {
        this.cityInfo.selectId = item.id
        this.cityInfo.showArea = item.text
        this.areaCity=item.id
        if (this.cityInfo.selectId != '' && this.cityInfo.selectId != 0) {
          this.areaId = item.id
        } else {
          this.areaId = this.areaInfo.selectId
        }
        this.passedSort='none',
          this.passedTag= '',
          this.passedChinese=true,
          this.showDate= '',
          this.page= '1',
          this.getTableData('city')
      }
      this.cityInfo.show = false
    },
    confirmFnArea(item, index) {
      if (this.provinceInfo.selectId != item.id) {
        this.provinceInfo.selectId = item.id
        if(this.tabs.active=='1'){
          this.areaProvince1=item.id
        }else{
          this.areaProvince2=item.id
        }
        this.provinceInfo.showArea = item.text
        this.passedSort='none',
          this.passedTag= '',
          this.passedChinese=true,
          this.showDate= '',
          this.page= '1',
          this.getTableData('province')
      }
      this.provinceInfo.show = false
    },
    //获得时间域
    getMaxMinMonth() {
      function dateSplit(param) {
        let paramStr = param + ''
        let dateStr = paramStr.replace(/(.{2})/g,'$1,')
        let dateArr = dateStr.substr(0, dateStr.length - 1).split(',')
        return dateArr
      }
      return new Promise((resolve, reject) => {
        this.$http.post('/api/yearCheckIndex/maxMonth', {type: '6'}).then(data => {
          let max = data.maps[0].MAX_MONTH
          let min = data.maps[0].MIN_MONTH

          let maxYear = dateSplit(max)[0] + dateSplit(max)[1]
          let maxMonth = dateSplit(max)[2]
          let maxDay= dateSplit(max)[3]
          let minYear = dateSplit(min)[0] + dateSplit(min)[1]
          let minMonth = dateSplit(min)[2]
          let minDay= dateSplit(min)[3]
          let actualMaxMonth = parseInt(maxMonth) - 1
          let actualMinMonth = parseInt(minMonth) - 1
          let showMaxMonth = maxMonth[0] == '0' ? maxMonth[1] : maxMonth
          let showMaxDay = maxDay[0] == '0' ? maxDay[1] : maxDay

          let currentDate = new Date(maxYear, actualMaxMonth, maxDay)
          let minDate = new Date(minYear, actualMinMonth, minDay)
          let maxDate = new Date(maxYear, actualMaxMonth, maxDay)
          let selectDate =  maxYear + '' + maxMonth + '' + maxDay

          let paramsDate = this.pageParams.selectDate
          let paramsYear = dateSplit(paramsDate)[0] + dateSplit(paramsDate)[1]
          let paramsMonth = dateSplit(paramsDate)[2]
          let paramsDay = dateSplit(paramsDate)[3]
          let paramsActualMonth = parseInt(paramsMonth) - 1
          let paramsShowMonth = paramsMonth[0] == '0' ? paramsMonth[1] : paramsMonth
          let paramsShowDay = paramsDay[0] == '0' ? paramsDay[1] : paramsDay
          let showData = paramsYear + '/' + paramsShowMonth + '/' + paramsShowDay
          let paramsCurrent = new Date(paramsYear, paramsActualMonth, paramsDay)

          this.datePickerProvince.currentDate = paramsCurrent
          this.datePickerProvince.minDate = minDate
          this.datePickerProvince.maxDate = maxDate
          this.datePickerProvince.showData = showData
          this.datePickerProvince.selectDate = paramsDate

          this.datePickerCity.currentDate = paramsCurrent
          this.datePickerCity.minDate = minDate
          this.datePickerCity.maxDate = maxDate
          this.datePickerCity.showData = showData
          this.datePickerCity.selectDate = paramsDate

          // this.endDatePickerProvince.currentDate = paramsCurrent
          // this.endDatePickerProvince.minDate = minDate
          // this.endDatePickerProvince.maxDate = maxDate
          // this.endDatePickerProvince.showData = showData
          // this.endDatePickerProvince.selectDate = paramsDate
          //
          // this.endDatePickerCity.currentDate = paramsCurrent
          // this.endDatePickerCity.minDate = minDate
          // this.endDatePickerCity.maxDate = maxDate
          // this.endDatePickerCity.showData = showData
          // this.endDatePickerCity.selectDate = paramsDate

          this.showDate = paramsYear + '年' + paramsShowMonth + '月' + paramsShowDay +'日'
          resolve("ok")
        })
      })
    },
    //获得省分统计情况
    getTableData(type) {
      let params = {}
      if (type == 'province') {
        this.table.tableData = []
        this.table.loading = true
        this.table.reset = false
        params = {
          belong_sysytem: '',
          areaId: this.provinceInfo.selectId,
          stateDate: this.datePickerProvince.selectDate,
          // endProvince:this.endDatePickerProvince.selectDate,
          page: this.page,
          pageRows:this.pageRows,
          sort: this.passedSort,
          tag: this.passedTag,
          chinese:this.passedChinese,
          type: '1'
        }
      }  else if (type == 'city') {
        this.table2.tableData = []
        this.table2.loading = true
        this.table2.reset = false
        params = {
          belong_sysytem: this.checkboxGroup.join(','),
          areaId: this.areaId,
          stateDate: this.datePickerCity.selectDate,
          // endCity:this.endDatePickerCity.selectDate,
          page: this.page,
          pageRows:this.pageRows,
          sort: this.passedSort,
          tag: this.passedTag,
          chinese:this.passedChinese,
          type: '2'
        }
      }
      this.$http
        .post('api/electric/electricDay', params)
        .then(res => {
          if (type == 'province') {
            this.table.tableData = res.rows;
            this.total = Math.ceil(res.total / 96);
            this.table.tableData.forEach((item, index) => {
              Object.assign(item, {sort: true})
            })
            this.table.loading = false
          }  else if (type == 'city') {
            this.table2.tableData = res.rows;
            this.total = Math.ceil(res.total / 96);
            this.table2.tableData.forEach((item, index) => {
              Object.assign(item, {sort: true})
            })
            this.table2.loading = false
          }
        });
    },
    nextText(type){
      //重新刷新页面数据
      if(type==='province'){
        this.getTableData('province');
      }else if(type==='city')
        this.getTableData('city');
    },
    //报表跳转
    jump(){
      this.$router.push({
        path:'/ReportFormDetailSpecial'
      })
    },
    //记录日志
    recordLogs() {
      let params = {
        userId: this.userInfo.user_id,
        verify_code: this.userInfo.verify_code,
        priv_id: '10102122',
      }

      this.$http.post('api/new/insertLogs', params).then(res => {})
    },
  },
  mounted() {
    this.recordLogs()
    this.getMaxMinMonth().then(res => {
      if (res == 'ok') {
        this.getProvinceInfo()
        this.getAreaInfo()
        if(this.role != 'city') {
          this.getTableData('province')
        }
        // this.getTableData('city')
      }
    })
  },
  beforeRouteLeave (to, from, next) {
    if (to.name == 'ReportFormDetail') {
      if(this.tabs.active == '1'){
        let formCharge = {
          // selectDate: this.endDatePickerProvince.selectDate,
          selectDate: this.datePickerProvince.selectDate,
        }
        sessionStorage.setItem('formCharge', JSON.stringify(formCharge))
      }else if(this.tabs.active == '2'){
        let formCharge = {
          // selectDate: this.endDatePickerCity.selectDate,
          selectDate: this.datePickerCity.selectDate,
        }
        sessionStorage.setItem('formCharge', JSON.stringify(formCharge))
      }
    } else {
      sessionStorage.removeItem('formCharge')
    }
    next()
  }
}
</script>

<style lang="scss" scoped>
.jump{
  position: absolute;
  top: 0;
  right: 20px;
  z-index: 1;
  color: #666666;
  cursor: pointer;
  .jump__icon{
    display: inline-block;
    width: 14px;
    height: 14px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-right: 2px;
    background-image: url(~@/assets/images/icon-link.png);
  }
}
.selects {
  margin-bottom: 0;

  &__item--date {
    flex: 1;
    width: 34%;
  }
  &__item--date1 {
    flex: 2;
    width: 34%;
  }
}

.tabs {
  display: flex;
  height: 32px;

  &__item {
    flex: 1;
    text-align: center;
    line-height: 32px;
    background: #fff;
    font-size: 14px;
    position: relative;

    &--current::before {
      content: "";
      position: absolute;
      width: 32px;
      height: 2px;
      background: #d9001b;
      bottom: 0;
      left: 50%;
      margin-left: -16px;
    }
  }
}

.checks {
  padding-bottom: 5px;
  padding-left: 80px;

  &__name {
    float: left;
    margin-left: -70px;
  }

  .van-checkbox-group {
    display: flex;
  }

  .van-checkbox + .van-checkbox{
    margin-left: 10px;
  }
}

.report-form {
  .title-bg {
    line-height: 1.4;
    padding-top: 18px;
    box-sizing: border-box;
    font-size: 18px;
  }

  .title-tip {
    padding: 2px 10px 0;
    font-size: 12px;
  }

  .water-mark {
    z-index: 1;
  }
}
.select-date {
  -webkit-box-flex: 2;
  flex: 2;
}
.select-address {
  -webkit-box-flex: 1;
  flex: 1;
}
/deep/ .van-pagination__item{
  color:#ff716b;
}
/deep/ .van-pagination__item--disabled{
  color: #646566;
}
/deep/ .van-pagination__item:active{
  color:#ff716b;
  background:none;
}
</style>
